import * as React from "react";
import { Row, Col, Modal } from "antd";
import shui from "../../../../../../assets/img/shui.png";
import dian from "../../../../../../assets/img/dian.png";
import yuanmei from "../../../../../../assets/img/yuanmei.png";
import yuanyou from "../../../../../../assets/img/yuanyou.png";
import tianranqi from "../../../../../../assets/img/tianranqi.png";
import { WebVariable } from "../../../../../../data/WebVariable";
import { getEnergyAmount } from "../../../ServeApi";
import { AjaxData } from "../../../../../../data/interface/publicInterface";
export interface AmountCardGrounpProps {}

export interface AmountCardGrounpState {}

class AmountCardGrounp extends React.Component<
  AmountCardGrounpProps,
  AmountCardGrounpState
> {
  // private ClientWidth: number = document.body.offsetWidth;
  private dataSouce: any[] = [];

  render() {
    return (
      <div className="AmountCardGrounp">
        <div className="rowcon_body">
          <div className="row-md">
            {/* {this.dataSouce.length>0?:null} */}
            {WebVariable.categoryType.map((item) => {
              let sss: any = this.getItem(item.key);
              if (sss) {
                let energyAmount: string = "" + sss.energyAmount;
                let arr: string[] = energyAmount.split(".");
                return (
                  <div className="col-md-24 box">
                    <Row>
                      <Col span={10}>
                        <img
                          src={this.getUrl(item.key)}
                          alt={this.getType(item.key)}
                          width="100"
                        />
                      </Col>
                      <Col span={14}>
                        <div className="box_value">
                          {arr[0]}.<span>{arr[1]}度</span>
                        </div>
                        <p>{this.getType(item.key)}能源数量</p>
                      </Col>
                    </Row>
                  </div>
                );
              } else {
                return (
                  <div className="col-md-24 box">
                    <Row>
                      <Col span={10}>
                        <img
                          src={this.getUrl(item.key)}
                          alt={this.getType(item.key)}
                          width="100"
                        />
                      </Col>
                      <Col span={14}>
                        <div className="box_value">暂无</div>
                        <p>{this.getType(item.key)}能源数量</p>
                      </Col>
                    </Row>
                  </div>
                );
              }
            })}
          </div>
        </div>
      </div>
    );
  }
  componentDidMount() {
    let _this = this;
    this.screenChange(_this);
    this.getEnergyAmount();
  }
  //获取能源类型
  getType(key) {
    let str: string = "电";
    switch (key) {
      case "1":
        str = "电";
        break;
      case "2":
        str = "水";
        break;
      case "3":
        str = "原煤";
        break;
      case "4":
        str = "原油";
        break;
      case "5":
        str = "天然气";
        break;

      default:
        break;
    }
    return str;
  }
  //获取图片
  getUrl(key) {
    let obj = shui;
    switch (key) {
      case "1":
        obj = dian;
        break;
      case "2":
        obj = shui;
        break;
      case "3":
        obj = yuanmei;
        break;
      case "4":
        obj = yuanyou;
        break;
      case "5":
        obj = tianranqi;
        break;

      default:
        break;
    }
    return obj;
  }
  //能源库存查询
  async getEnergyAmount() {
    let _this = this;
    try {
      let res: any = await getEnergyAmount().catch((err) => {
        console.log(err);
      });
      let json: AjaxData = res;
      if (json.success) {
        _this.dataSouce = json.data;
        _this.forceUpdate();
      } else {
        Modal.error({
          title: json.message,
          onOk: () => {
            _this.setState({ loading: false });
          },
        });
      }
    } catch (error) {
      Modal.error({
        title: "初始化程序失败，无法读取数据，请刷新页面。",
        onOk: () => {
          _this.setState({ loading: false });
        },
      });
      console.error(error);
    }
  }
  getItem(type) {
    let item: any = null;
    if (this.dataSouce.length > 0) {
      this.dataSouce.map((list) => {
        if ("" + list.energyTypeId === type) {
          item = list;
        }
        return list;
      });
    }
    return item;
  }
  /**监听屏幕变化 */
  screenChange(_this) {
    window.addEventListener("resize", (event) => {
      this.hasResize(event, _this);
    });
  }
  hasResize(rl, _this) {
    let inWidth = rl.target.innerWidth;
    _this.ClientWidth = inWidth;
    _this.forceUpdate();
  }
}

export default AmountCardGrounp;
